<template>
  <div
    id="index"
    ref="appRef"
  >
    <div>
      <div class="head">
        <div class="title1">
          <div>科技城水厂大数据平台</div>
        </div>
        <div>
          <div
            class="loginIcon"
            @click="toBack"
          />
        </div>
        <div class="titleSub">
          <div class="title2">
            <div
              v-for="(tab, index) in tabs"
              :key="index"
              class="tab-title"
              :class="{ active: activeTab === index }"
              @click="switchTab(index)"
            >
              {{ tab.title }}
            </div>
          </div>
        </div>
      </div>
      <div class="content">
        <!-- 首页 -->
        <!-- <div v-show="activeTab === 1" /> -->
        <mainContent v-if="activeTab === 0" />
        <reportList v-if="activeTab === 1" />
        <Electric v-if="activeTab === 2" />
        <Analysis v-if="activeTab === 3" />
      </div>
    </div>
  </div>
</template>

<script>
	import mainContent from './mainContent'
	import reportList from './reportList'
	import Electric from './Electric.vue'
	import Analysis from './Analysis.vue'


	export default {
		components: {
			mainContent,
			reportList,
			Electric,
			Analysis
		},
		data() {
			return {

				activeTab: 0, // 当前选中的Tab索引
				tabs: [{
						title: "首页",
					},
					{
						title: "报表",
					},
					{
						title: "电量",
					},
					{
						title: "统计",
					},
				],

			}
		},
		watch: {

		},
		beforeMount() {

		},
		beforeDestroy() {

		},
		mounted() {

		},
		unMounted() {},
		methods: {

			switchTab(index) {
				this.activeTab = index; // 切换到对应的Tab
			},
			toBack() {
				const currentDomain = window.location.hostname;
				const targetPort = 6002;
				const newUrl = `http://${currentDomain}:${targetPort}`;
				window.open(newUrl, '_blank'); // 打开新页面
			}
		}
	}
</script>
<style lang="scss">
	@import '../assets/scss/index.scss';
</style>
<style type="text/css">
	#index {
		box-sizing: border-box;
		line-height: 20px;
		color: rgba(255, 255, 255, 1);
		font-size: 16px;
		font-family: Arial-700;
		padding: 30px;
		/* background-image: url(../assets/bg.png); */
		background-size: contain;
		background-repeat: no-repeat;
		background-color: #000B17;
	}

	.loginIcon {
		background-image: url(../assets/icon-login.png);
		width: 60px;
		height: 60px;
		position: absolute;
		top: 80px;
		right: 30px;
		background-size: contain;
		cursor: pointer;

	}

	.head {
		/* margin-top: 22px; */
		/* display: flex; */
		/* 		align-items: baseline;
		justify-content: space-between; */
		width: 100%;
		height: 137px;
		/* vertical-align: bottom; */
		background-image: url(../assets/head-bg.png);
		/* background-size: contain; */
		background-repeat: no-repeat;
		margin: auto;
		/* border-bottom: 1px solid rgba(6, 52, 128, 1); */

	}

	.title1 {
		line-height: 78px;
		color: rgba(102, 255, 255, 1);
		font-size: 36px;
		font-family: Arial-700;
		display: flex;
		justify-content: center;
	}

	.titleSub {
		display: flex;
		justify-content: center;
	}

	.title2 {
		line-height: 58px;
		width: 500px;
		color: #8CB1D6;
		font-size: 18px;
		font-family: Arial-700;
		display: flex;
		justify-content: space-around;


	}

	.content-left {
		/* background-image: url(../assets/square_bg.png);
		background-size: cover; */
		width: 405px;
		/* padding: 30px 30px; */
	}

	.content-right {
		width: 554px;
	}

	.content-main {
		/* width: 900px; */
	}

	.content-bottom {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}



	.content-main .video-content .title {
		color: rgba(50, 147, 223, 1);
		font-size: 18px;
		line-height: 40px;

	}

	.videochoose {
		/* font-size: 19px !important; */
		color: rgba(255, 204, 0, 1) !important;
		font-weight: bolder;
	}

	.content .bg {
		border: 1px #174eb0 solid;
		border-radius: 10px;
		padding: 5px 5px;
		/* background-image: url(../assets/bg-grid.png); */
	}

	.content .title {
		margin-top: 0px;
		margin-left: 5px;
		line-height: 18px;
		color: rgba(6, 209, 219, 1);
		font-size: 15px;
		position: relative;
		top: -18px;
	}

	.content .title img {
		width: 18px;
	}

	.content .content {
		margin-top: 10px;
		padding: 20px;
		/* padding-top: 20px; */
	}

	.content .content .title {
		line-height: 22px;
		color: rgba(6, 209, 219, 1);
		font-size: 18px;
		width: 120px;
		font-weight: 300;
		margin-left: 10px;
	}

	.content .content .value {
		line-height: 22px;
		color: rgba(255, 204, 0, 1);
		font-size: 18px;
		font-weight: 300;
	}

	.content .content .value .unit {
		line-height: 17px;
		margin-left: 5px;
		color: rgba(49, 140, 212, 1);
		font-size: 14px;
	}

	.tab-title {
		cursor: pointer;
	}

	.tab-title.active {
		font-weight: bold;
		color: rgba(49, 140, 212, 1);
	}

	/* 	/deep/.rows{
		height: 135px !important;
	} */
</style>
